<template>
  <!--  公话-充值减款 -->
  <div class="deposit_management">
    <el-form :inline="true" :model="elform" size="mini" style="margintop: 20px">
      <el-form-item v-if="userType == '1' ? true : false">
        <el-button type="primary" @click="topup()" size="mini">充值</el-button>
      </el-form-item>
      <el-form-item v-if="userType == '1' ? true : false">
        <el-button type="primary" @click="deduction()" size="mini">减款</el-button>
      </el-form-item>
    </el-form>
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline"
      size="mini"
      style="margintop: 20px"
    >
      <el-form-item label="操作类型:">
        <el-select v-model="operationtype" placeholder="请选择" size="mini">
          <el-option key label="全部类型" value></el-option>

          <el-option
            v-for="item in operationtypeoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Inquire()" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataListLoading"
      :data="tableinformation"
      style="width: 100%"
      border="border"
      :header-cell-style="headFirst"
      highlight-current-row
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <!-- <el-table-column
            prop="userName"
            label="代理商名称">
      </el-table-column>-->
      <el-table-column prop="moneyAmount" label="金额数量(元)">
        <template slot-scope="scope">
          <div>{{ scope.row.moneyAmount | amountyuan }}</div>
        </template>
        <!-- 以元计算 -->
      </el-table-column>
      <el-table-column label="操作类型">
        <template slot-scope="scope">
          <div>{{ scope.row.operateType | filetsoperateTypet }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operateTime" label="操作起始时间" width="180%"></el-table-column>

      <el-table-column label="充值前可用分钟数">
        <template slot-scope="scope">
          <div>{{ scope.row.secondsBefore | timeconversion }}</div>
        </template>
      </el-table-column>
      <!-- 分种来计算 -->
      <el-table-column label="充值分钟数">
        <template slot-scope="scope">
          <!-- {{scope.row.operateType == 1 && scope.row.secondsAmount !=0 ?'-':''}} -->
          <div>{{ scope.row.secondsAmount | timeconversion }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="secondsAfter" label="充值后可用分钟数">
        <template slot-scope="scope">
          <div>{{ scope.row.secondsAfter | timeconversion }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChangepage"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
    <!-- 充值金额 -->
    <el-dialog
      class="eldiaglogcss"
      width="500px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="充值"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <el-row>
        <el-col :span="16" class="dialog_center">
          <el-form :model="addataForm" :rules="myRule" ref="addRef" label-width="80px">
            <el-form-item label="充值金额:" prop="rechargeamount">
              <el-input-number
                size="mini"
                v-model="addataForm.rechargeamount"
                :precision="2"
                :step="0.1"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 减款金额 -->
    <el-dialog
      class="eldiaglogcss"
      width="500px"
      custom-class="customWidth"
      center
      :before-close="eidtcloseDialog"
      title="减款"
      :close-on-click-modal="false"
      :visible.sync="eidtDialogFormVisible"
    >
      <el-row>
        <el-col :span="16" class="dialog_center">
          <el-form :model="eidtForm" :rules="myRule" ref="eidtRef" label-width="80px">
            <el-form-item label="减款金额:" prop="rechargeamount">
              <el-col :span="15">
                <el-input-number
                  size="mini"
                  v-model="eidtForm.rechargeamount"
                  :precision="2"
                  :step="0.1"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="eidtvisible()">取消</el-button>
        <el-button type="primary" @click="eidtFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      tableinformation: [],
      dataListLoading: false,
      pageNum: 1,
      pageSize: 10,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      //权限判断
      userType: '',
      //操作类型
      operationtype: '',
      operationtypeoption: [
        {
          value: '0',
          label: '充值'
        },
        {
          value: '1',
          label: '减款'
        }
      ],
      //充值日期
      datetime: [],
      time: [],

      addDialogFormVisible: false,
      eidtDialogFormVisible: false,

      addataForm: {
        rechargeamount: ''
      },
      eidtForm: {
        rechargeamount: ''
      },
      myRule: {},
      //登录id
      administrator: ''
    }
  },
  created() {
    this.userType = sessionStorage.getItem('userType')
    this.administrator = sessionStorage.getItem('administrator')
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    filetsoperateTypet: function(operateType) {
      if (operateType == '0') {
        return '充值'
      }
      if (operateType == '1') {
        return '减款'
      }
    }
  },
  methods: {
    addvisible() {
      this.addDialogFormVisible = false
      this.$refs['addRef'].resetFields()
    },
    closeDialog(done) {
      this.$refs['addRef'].resetFields()
      done()
    },
    //确认充值
    addataFormSubmit() {
      if (
        this.addataForm.rechargeamount == 0 ||
        this.addataForm.rechargeamount == undefined
      ) {
        this.$message({
          message: '请选择正确金额',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/voip/recharge/recharge-for-agent'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            operatorGuid: this.administrator,
            rechargeVlaue: parseInt(this.addataForm.rechargeamount),
            userGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.addataForm.rechargeamount = ''
          this.$message({
            message: '充值成功',
            type: 'success'
          })
          this.addDialogFormVisible = false
          this.searchinit()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //
    eidtcloseDialog(done) {
      this.$refs['eidtRef'].resetFields()
      done()
    },
    eidtvisible() {
      this.eidtDialogFormVisible = false
      this.$refs['eidtRef'].resetFields()
    },
    //减款充值
    eidtFormSubmit() {
      if (
        this.eidtForm.rechargeamount == 0 ||
        this.eidtForm.rechargeamount == undefined
      ) {
        this.$message({
          message: '请选择正确金额',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/voip/recharge/deduction-for-agent'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            operatorGuid: this.administrator,
            rechargeVlaue: parseInt(this.eidtForm.rechargeamount),
            userGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.eidtForm.rechargeamount = 0
          this.$message({
            message: '减款成功',
            type: 'success'
          })
          this.eidtDialogFormVisible = false
          this.searchinit()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //充值
    topup() {
      this.addDialogFormVisible = true
    },
    //减款
    deduction() {
      this.eidtDialogFormVisible = true
    },
    //查询
    Inquire() {
      this.pageNum = 1
      if (this.operationtype !== null) {
        this.searchInfo.operateType = this.operationtype
      }
      this.searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
      this.searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
      this.searchInfo.unitGuid = this.changeschoolid
      console.log(this.searchInfo)

      this.searchinit()
    },
    //查询操作接口
    searchinit() {
      this.dataListLoading = true
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/voip/recharge/agent-recharge-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableinformation = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.searchInfo = {}
          this.dataListLoading = false
           if (this.tableinformation.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //分类页
    handleSizeChangepage(val) {
      this.pageSize = val
      this.searchinit()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.searchinit()
    }
  }
}
</script>

<style lang="scss" scoped>
.deposit_management {
  padding: 10px;
  .demo-form-inline {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  // .eldiaglogcss /deep/ .el-dialog--center .el-dialog__body{
  //    padding-left: 130px;
  // }
  .dialog_center {
    display: flex;
    justify-content: center;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>